<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=0">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>提现</title>

    <!-- Bootstrap -->
    <link href="bootstrap-3.3.5-dist/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap-3.3.5-dist/css/withdraw.css" rel="stylesheet">
    
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <div class="container choose_card_number">
      <div class="row">
        <div class="col-md-12">
          <span>银 行</span>
          <div class="choose_bank">
            <span>请选择银行卡</span>
            <div class="icon glyphicon glyphicon-menu-right"></div>
          </div>
        </div>
        <form>
        <div class="col-md-12">
          <span>金 额</span>
          <input class="password1 " type="number" placeholder="最多可提取资金568.32元" oninput="button_change (event)">
        </div>
        <button type="button" disabled="disabled" class="sure button_1">提现</button>
        </form>
      </div>
    </div>
    <!--背景灰色图层-->
    <div class="bgc"></div>
    <!--选择银行卡-->
    <div class="container choose_card choose_card_number">
      <div class="row" style="background-color: #fff;">
        <div class="col-md-12">
          <div class="choose_bank_title">
            <img src="images/close.png">
            <span class="choose_bank_title">请选择银行</span>
          </div>
        </div>
        <div class="col-md-12 card_list">
            <img src="images/gongshang.png">
            工商银行 
            <span class="card_number">尾号<span>3256</span></span>
        </div>
        <div class="col-md-12 card_list">
            <img src="images/nongye.png">
            农业银行
            <span class="card_number">尾号<span>3256</span></span>
        </div>
        <div class="col-md-12 card_list">
        <a>
            添加银行卡
            <div class="icon glyphicon glyphicon-menu-right"></div>
        </a>
        </div>  
      </div>
    </div>
      <!--背景灰色图层-->
  <div class="bgc"></div>
      <!--输入支付密码图层-->
  <div class="pay_password">
      <div class="container">
          <div class="row">
            <div class="col-md-12 pay_password_title">输入支付密码</div>
            <div class="col-md-12">
                <from>
                  <div class="pay_password_input">
                    <span>交易密码</span>
                    <input class="password1" type="password" placeholder="请输入旧密码"  >
                  </div>
                  <div class="pay_password_buttun">
                    <button type="button"  class="cancle_button">取消</button>
                    <button type="submit"  class="sure_button">确定</button>
                  </div>
                </from>
            </div>  
          </div>
      </div> 
  </div>
  <!--输入密码错误-->
  <div class=" pop">
          <div class="row">
            <div class="col-md-12 dialog" style="opacity:1;">
              <p>提示</p>
              <p class="border_dialog">密码错误你还可以输入<span>2</span>次</p>
              <a href="index.html"><div class="forget_sure">
              忘记密码
              </div></a>
              <div class="click_sure">
              重新输入
              </div>
            </div>
            
          </div>
  </div>    
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="js/jquery-1.11.3.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
    <script type="text/javascript">
      $(function() { 
          $('.sure').attr("disabled", true);
          $(".bgc").css("height",$(document).height()); 
          // var password1 = $('.password1').val();            
      });
      /*全部选项都填好了button才可以点击*/
      function button_change (event) {
          var password1 = $('.password1').val(); 
          if(password1=="")
          {
            $('.button_1').attr("disabled", "disabled");
          }else{
            $('.button_1').attr("disabled", false);
            $(".button_1").css("background-color","#f5a002");
          }
      };
      /*选择银行卡 显示*/
      $(".choose_bank").click(function(){
        $(".bgc").css("display","block");
        $(".choose_card").css("display","block");
      });
      /*选择银行卡 取消*/
      $(".choose_bank_title>img").click(function(){
        $(".bgc").css("display","none");
        $(".choose_card").css("display","none");
      });
      /*银行信息赋值*/
      $(".card_list").click(function(){
        var bank_name = $(this).text();
        $(".choose_bank>span").text(bank_name);
        $(".bgc").css("display","none");
        $(".choose_card").css("display","none");
      });
      /*关闭支付框*/
      $(".cancle_button").click(function(){
          $(".bgc").css("display","none");
          $(".pay_password").css("display","none");
      });
      /*点击显示输入密码*/
      $(".sure").click(function(){
          $(".bgc").css("display","block");
          $(".pay_password").css("display","block");
      });
      /*点击重新输入密码*/
      $(".click_sure").click(function(){
          $(".bgc").css("display","none");
          $(".pop").css("display","none");
          $(".bgc").css("display","block");
          $(".pay_password").css("display","block");
      });
    </script>
  </body>
</html>